import React, { PureComponent, Fragment, Suspense } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';

import { Row, Tag, Card, Form, Table, Timeline } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import styles from './RiskControl.less';

const FormItem = Form.Item;

const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');
const statusMap = ['default', 'processing', 'success', 'error'];

/* eslint react/no-multi-comp:0 */
@connect(({ riskControlRule, loading }) => ({
  riskControlRule,
  loading: loading.models.riskControlRule,
}))
@Form.create()
class RiskControl extends PureComponent {
  state = {
    listLoading: false,
    formValues: {
      stockId: '',
      orderField: '', // 排序字段
      orderType: 0, // 排序方向
    }, // 查询菜单栏   查询参数
    selectedRows: [],

    stepFormValues: {},
  };

  columns = [
    {
      title: '投资标的',
      dataIndex: 'name',
      width: '16%',
      key: 'name',
    },
    {
      title: '仓位总数',
      dataIndex: 'rule',
      key: 'now',
      width: '16%',
    },
    {
      title: '周期权计划量',
      dataIndex: 'week_rule',
      width: '16%',
      key: 'week_rule',
    },
    {
      title: '月期权计划量',
      dataIndex: 'rule',
      width: '16%',
      key: 'rule',
    },
    {
      title: '现有',
      dataIndex: 'now',
      width: '16%',
      key: 'now1',
    },
    {
      title: '剩余',
      dataIndex: 'remain',
      width: '16%',
      key: 'remain',
      render: (tags, record) => {
        const bili = record.remain;

        let color = '';
        if (bili < 0) {
          color = '#ff0030';
        } else {
          color = '#000000';
        }
        return <span style={{ color }}>{tags}</span>;
      },
    },
  ];

  data = [
    {
      key: 1,
      name: 'John Brown sr.',
      rule: 60,
      week_rule: 60,
      now: 'New York No. 1 Lake Park',
      children: [
        {
          key: 11,
          name: 'John Brown',
          rule: 42,
          week_rule: 60,
          now: 'New York No. 2 Lake Park',
        },
        {
          key: 12,
          name: 'John Brown jr.',
          rule: 30,
          week_rule: 60,
          now: 'New York No. 3 Lake Park',
          children: [
            {
              key: 121,
              name: 'Jimmy Brown',
              rule: 16,
              week_rule: 60,
              now: 'New York No. 3 Lake Park',
            },
          ],
        },
        {
          key: 13,
          name: 'Jim Green sr.',
          rule: 72,
          week_rule: 60,
          now: 'London No. 1 Lake Park',
          children: [
            {
              key: 131,
              name: 'Jim Green',
              rule: 42,
              week_rule: 60,
              now: 'London No. 2 Lake Park',
              children: [
                {
                  key: 1311,
                  name: 'Jim Green jr.',
                  rule: 25,
                  week_rule: 60,
                  now: 'London No. 3 Lake Park',
                },
                {
                  key: 1312,
                  name: 'Jimmy Green sr.',
                  rule: 18,
                  week_rule: 60,
                  now: 'London No. 4 Lake Park',
                },
              ],
            },
          ],
        },
      ],
    },
    {
      key: 2,
      name: 'Joe Black',
      rule: 32,
      week_rule: 60,
      now: 'Sidney No. 1 Lake Park',
      children: [],
    },
  ];

  rowSelection = {
    // 选中状态
    onChange: (selectedRowKeys, selectedRows) => {
      // alert(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      alert(record, selected, selectedRows);
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

  // 默认加载数据-起始方法
  render() {
    const {
      riskControlRule: { riskData },
    } = this.props;
    for (let i = 0; i < riskData.data.length; i++) {
      riskData.data[i].key = `00${i}`;
      if (riskData.data[i].children.length > 0) {
        for (let j = 0; j < riskData.data[i].children.length; j++) {
          riskData.data[i].children[j].key = `00${i}${j}`;
        }
      }
    }

    return (
      <PageHeaderWrapper title="四号仓位配置管理">
        {riskData.data.length === 0 ? (
          <Card bordered={false} />
        ) : (
          <Card bordered={false}>
            <div className={styles.tableList}>
              <Table
                rowClassName={(record, index) =>
                  record.flag === true
                    ? record.remain < 0
                      ? styles.fff1f0
                      : styles.ffccc7
                    : styles.ffffff
                }
                columns={this.columns}
                dataSource={riskData.data}
              />
              ,
            </div>
          </Card>
        )}
      </PageHeaderWrapper>
    );
  }

  // 加载完 之后 再加载 此 方法
  componentDidMount() {
    const { dispatch } = this.props;
    const { formValues, listLoading } = this.state;
    dispatch({
      type: 'riskControlRule/GetRiskData',
      payload: formValues,
    });
  }

  // 改变每页条数和当前页
  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    formValues.pageNum = pagination.current;
    formValues.pageSize = pagination.pageSize;

    if (sorter.field) {
      // 排序参数
      formValues.orderField = `${sorter.field}`;
      if (sorter.order == 'ascend') {
        formValues.orderType = 2; // 升序
      } else if (sorter.order == 'descend') {
        formValues.orderType = 1; // 降序
      } else {
        formValues.orderType = 0; // 不排序
      }
    }
    const params = {
      ...formValues,
      ...filters,
    };

    dispatch({
      type: 'riskControlRule/GetRoyaltiesList',
      payload: params1,
    });
  };
}

export default RiskControl;
